<template>
  <div>
<!--  商品区域总容器-->
    <router-link tag="div" :to="{name:'GoodsDetail',params:{id:item.id}}" class="goods-box" v-for="item in recoList" :key="item.id">
<!--      商品区域左侧图片-->
      <div class="left-img">
        <img class="goods-img" :src="item.recoImg" alt="">
      </div>
<!--      商品右侧商品信息-->
      <div class="right-content">
<!--      商品标题-->
      <div class="goods-desc">
        <span >{{item.recoDesc}}</span>
      </div>
<!--      商品价格、拼单、用户头像-->
      <div class="goods-price">
<!--        商品具体价格-->
        <span class="money">{{item.recoPrice}}</span>
<!--        拼单信息-->
        <span class="pindan">{{item.Pindan}}</span>
<!--        用户头像-->
        <div class="user-img">
          <img class="img-one" src="https://avatar3.pddpic.com/avatar/default/1.png?imageView2/2/w/1300/q/80" alt="">
          <img class="img-two" src="https://avatar3.pddpic.com/a/Q0ZkVGdMdzFBU3NidUxjVHJVMlVwSlRTbm5wRTdLOWQzUT09djA0-1531214359?imageMogr2/thumbnail/100x" alt="">
        </div>
      </div>
      </div>
      </router-link>
  </div>
</template>

<script>
    export default {
        name: "HomeGoods",
        props:{
          recoList:Array
        }
    }
</script>

<style scoped lang="stylus">
  .goods-box
    height 0
    padding-bottom 45%
    overflow hidden
    .left-img
      width 10rem
      height 10rem
      display inline-block
      float left
      .goods-img
        width 100%
        height 100%
    .right-content
      height 10 rem
      width 18 rem
      float right
      .goods-desc
        overflow hidden
        width 17rem
        height 2.4rem
        font-size 0.9rem
        margin-bottom 6.5rem
        color #151516
      .goods-price
        .money
          float left
          color #e02e24
          font-weight bold
          font-size 1.2rem
          margin-left 0.3rem
          margin-right 0.3rem
        .pindan
          font-size 0.8rem
          color #9c9c9c
          float left
          margin-top 0.1rem
        .user-img
          display inline-block
          margin-left 8.5rem
          .img-one,.img-two
            border-radius 50%
            width 1.5rem
            height 1.5rem
          .img-one
            position relative
            right -1.1rem


      .click
        height 2rem
        width 4rem
        background-color #e02e24
        text-align center
        line-height 2rem
        float right
        border-radius 0.3rem
        color white
        font-size 0.8rem

</style>
